<template>
  <div class="filter-container">
    <template v-if="tools.length !== 0">
      <template v-for="column in tools">
        <slot v-if="column.slot" :name="column.slot" />
      </template>
    </template>

    <el-tooltip class="item" effect="dark" content="添加条件" placement="top">
      <el-button
        size="small"
        class="filter-item"
        type="default"
        style="float: right; margin-left: 8px"
        icon="el-icon-plus"
        @click="addLastItems"
      >
        添加条件
      </el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="添加条件组" placement="top">
      <el-button
        size="small"
        class="filter-item"
        type="default"
        style="float: right; margin-left: 8px"
        icon="el-icon-plus"
        @click="addItemGroup"
      >
        添加条件组
      </el-button>
    </el-tooltip>
    <slot name="dynamicColumn" />
    <el-tooltip class="item" effect="dark" content="查询" placement="top">
      <el-button
        size="small"
        class="filter-item"
        style="float: right; margin-left: 8px"
        icon="el-icon-search"
        @click="handelSearch"
      />
    </el-tooltip>
    <!-- <slot name="dynamicColumn" /> -->
    <el-tooltip
      v-if="tableKey && filter.length > 0"
      class="item"
      effect="dark"
      content="保存查询条件"
      placement="top"
    >
      <el-button
        size="small"
        class="filter-item"
        style="float: right; margin-left: 8px"
        icon="el-icon-s-claim"
        @click="saveSetting"
      />
    </el-tooltip>

    <el-tooltip
      class="item"
      effect="dark"
      content="查询条件重置"
      placement="top"
    >
      <el-button
        size="small"
        class="filter-item"
        type="default"
        style="float: right; margin-left: 8px"
        icon="el-icon-refresh"
        @click="handleClear"
      />
    </el-tooltip>
    <el-tooltip
      v-show="filter.length > 0"
      class="item"
      effect="dark"
      :content="isExpansion ? '隐藏' : '显示'"
      placement="top"
    >
      <el-button
        size="small"
        class="filter-item"
        :type="isExpansion ? 'success' : 'danger'"
        style="float: right; margin-left: 8px"
        :icon="isExpansion ? 'el-icon-open' : 'el-icon-turn-off'"
        @click="expansion"
      />
    </el-tooltip>
    <el-tooltip
      v-if="tableColumnsCacheKey"
      class="item"
      effect="dark"
      content="列重置"
      placement="top"
    >
      <el-button
        v-if="tableColumnsCacheKey"
        size="small"
        class="filter-item"
        type="warning"
        style="float: right; margin-left: 8px"
        icon="el-icon-refresh-left"
        @click="clearCacheColumns"
      />
    </el-tooltip>

    <template v-if="toolsSearch.length !== 0">
      <template v-for="column in toolsSearch">
        <slot v-if="column.slot" :name="column.slot" />
      </template>
    </template>
    <div v-show="filter.length > 0 && isExpansion" class="filterBox">
      <template v-for="(item, index) in filter" :key="item.id">
        <!-- 分组筛选 -->
        <div
          v-if="item.groupFilter && item.groupFilter.length > 0"
          :key="index"
          class="groupFilterBox"
          :style="{
            marginTop:
              index !== 0 && filter[index - 1].addType !== 'group'
                ? '15px'
                : '0px',
          }"
        >
          <div class="groupFilterAndOr">
            <el-dropdown
              v-if="index !== filter.length - 1"
              @command="handleCommand($event, index)"
            >
              <span class="el-dropdown-link"
                >{{ item.AndOr }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="1">或者</el-dropdown-item>
                <el-dropdown-item :command="0">并且</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="groupFilter">
            <el-row
              v-for="(groupItem, groupIndex) in item.groupFilter"
              :key="groupIndex"
            >
              <el-col :span="3">
                <el-button
                  icon="el-icon-plus"
                  plain
                  circle
                  size="small"
                  @click="addGroupFilterLastItems(index)"
                />
                <el-button
                  icon="el-icon-delete"
                  plain
                  circle
                  size="small"
                  @click="rmGroupFilterItems(index, groupIndex)"
                />
              </el-col>
              <el-col :span="5">
                <el-select
                  v-model="groupItem.FieldName"
                  filterable
                  placeholder="请选择属性"
                  @change="
                    groupSelectChange(
                      index,
                      groupItem.FieldName,
                      groupIndex,
                      groupItem
                    )
                  "
                >
                  <el-option
                    v-for="(col, index2) in columns.filter(
                      (item) => item.field !== undefined
                    )"
                    :key="index2"
                    :label="col.label"
                    :value="col.field"
                  />
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-select
                  v-model="groupItem.Operator"
                  placeholder="请选择操作"
                  @change="
                    groupOperatorSelectChange(
                      index,
                      groupItem.FieldName,
                      groupIndex,
                      groupItem
                    )
                  "
                >
                  <el-option
                    v-for="(op, index2) in operatorFunc(
                      operator,
                      groupItem.type
                    )"
                    :key="index2"
                    :label="op.label"
                    :value="op.value"
                  />
                </el-select>
              </el-col>
              <el-col
                :span="
                  groupItem.type == 'date' && groupItem.Operator == 'eq'
                    ? 10
                    : 6
                "
              >
                <template v-if="groupItem.type == 'date'">
                  <el-date-picker
                    :key="groupIndex"
                    v-model="groupItem.CompareValue"
                    :type="
                      groupItem.Operator == 'eq' ? 'datetimerange' : 'date'
                    "
                    :picker-options="pickerOptions"
                    placeholder="选择日期和时间"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    :disabled="
                      groupItem.Operator === 'empty' ||
                      groupItem.Operator === 'noEmpty'
                    "
                  />
                </template>
                <template v-else-if="groupItem.type == 'bool'">
                  <el-select
                    v-model="groupItem.CompareValue"
                    placeholder="请选择"
                    :disabled="
                      groupItem.Operator === 'empty' ||
                      groupItem.Operator === 'noEmpty'
                    "
                  >
                    <el-option
                      v-for="(op, index2) in boolOp"
                      :key="index2"
                      :label="op.label"
                      :value="op.value"
                    />
                  </el-select>
                </template>
                <template v-else-if="groupItem.type == 'inputNumber'">
                  <el-input-number
                    v-model="groupItem.CompareValue"
                    placeholder="请输入值"
                    clearable
                    :min="0"
                    @keyup.enter.native="handelSearch"
                  />
                </template>

                <template v-else-if="groupItem.type == 'select'">
                  <el-select
                    v-if="groupItem.isItemValue"
                    v-model="groupItem.CompareValue"
                    placeholder="请选择参数"
                    :disabled="
                      groupItem.Operator === 'empty' ||
                      groupItem.Operator === 'noEmpty'
                    "
                    filterable
                  >
                    <el-option
                      v-for="(op, index2) in groupItem.filterOptions"
                      :key="index2"
                      :label="op.itemValue"
                      :value="op.itemKey"
                    />
                  </el-select>
                  <el-select
                    v-else
                    v-model="groupItem.CompareValue"
                    placeholder="请选择参数"
                    :multiple="groupItem.isMultiple"
                    :disabled="
                      groupItem.Operator === 'empty' ||
                      groupItem.Operator === 'noEmpty'
                    "
                    filterable
                  >
                    <el-option
                      v-for="(op, index2) in groupItem.filterOptions"
                      :key="index2"
                      :label="op.label"
                      :value="op.value"
                    />
                  </el-select>
                </template>
                <template v-else>
                  <el-input
                    v-model="groupItem.CompareValue"
                    placeholder="请输入值"
                    clearable
                    :disabled="
                      groupItem.Operator === 'empty' ||
                      groupItem.Operator === 'noEmpty'
                    "
                    @keyup.enter.native="handelSearch"
                  />
                </template>
              </el-col>
              <!-- 操作 -->
              <el-col v-if="groupIndex > 0" :span="3">
                <el-select
                  v-model="groupItem.AndOr"
                  placeholder="请选择"
                  @change="handelSearch"
                >
                  <el-option
                    v-for="(op, index2) in andor"
                    :key="index2"
                    :label="op.label"
                    :value="op.value"
                  />
                </el-select>
              </el-col>
            </el-row>
            <i
              class="el-icon-error removeGroupFilterIcon"
              @click="removeGroupFilter(index)"
            />
          </div>
        </div>

        <div v-else class="filter">
          <!-- 单个 -->
          <el-row class="filterItem">
            <div class="groupFilterAndOr filterAndOr">
              <el-dropdown
                v-if="index !== filter.length - 1"
                @command="handleCommand($event, index)"
              >
                <span class="el-dropdown-link"
                  >{{ item.AndOr
                  }}<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">或者</el-dropdown-item>
                  <el-dropdown-item :command="0">并且</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <el-col :span="3">
              <el-button
                icon="el-icon-plus"
                plain
                circle
                size="small"
                @click="addLastItems"
              />
              <el-button
                icon="el-icon-delete"
                plain
                circle
                size="small"
                @click="rmLastItems(index)"
              />
            </el-col>
            <el-col :span="5">
              <el-select
                v-model="item.FieldName"
                filterable
                placeholder="请选择属性"
                @change="selectChange(item.FieldName, index, item)"
              >
                <el-option
                  v-for="(col, index2) in columns.filter(
                    (item) => item.field !== undefined
                  )"
                  :key="index2"
                  :label="col.label"
                  :value="col.field"
                />
              </el-select>
            </el-col>
            <el-col :span="3">
              <el-select
                v-model="item.Operator"
                placeholder="请选择操作"
                @change="operatorSelectChange(item.FieldName, index, item)"
              >
                <el-option
                  v-for="(op, index2) in operatorFunc(operator, item.type)"
                  :key="index2"
                  :label="op.label"
                  :value="op.value"
                />
              </el-select>
            </el-col>
            <el-col
              :span="item.type == 'date' && item.Operator == 'eq' ? 10 : 6"
            >
              <template v-if="item.type == 'date'">
                <el-date-picker
                  :key="index"
                  v-model="item.CompareValue"
                  :type="item.Operator == 'eq' ? 'datetimerange' : 'date'"
                  :picker-options="pickerOptions"
                  placeholder="选择日期和时间"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  :disabled="
                    item.Operator === 'empty' || item.Operator === 'noEmpty'
                  "
                />
              </template>
              <template v-else-if="item.type == 'bool'">
                <el-select
                  v-model="item.CompareValue"
                  placeholder="请选择"
                  :disabled="
                    item.Operator === 'empty' || item.Operator === 'noEmpty'
                  "
                  @change="handelSearch"
                >
                  <el-option
                    v-for="(op, index2) in boolOp"
                    :key="index2"
                    :label="op.label"
                    :value="op.value"
                  />
                </el-select>
              </template>
              <template v-else-if="item.type == 'inputNumber'">
                <el-input-number
                  v-model="item.CompareValue"
                  placeholder="请输入值"
                  clearable
                  :min="0"
                  @keyup.enter.native="handelSearch"
                />
              </template>

              <template v-else-if="item.type == 'select'">
                <el-select
                  v-if="item.isItemValue"
                  v-model="item.CompareValue"
                  placeholder="请选择参数"
                  filterable
                  :disabled="
                    item.Operator === 'empty' || item.Operator === 'noEmpty'
                  "
                  @change="handelSearch"
                >
                  <el-option
                    v-for="(op, index2) in item.filterOptions"
                    :key="index2"
                    :label="op.itemValue"
                    :value="op.itemKey"
                  />
                </el-select>
                <el-select
                  v-else
                  v-model="item.CompareValue"
                  placeholder="请选择参数"
                  :multiple="item.isMultiple"
                  filterable
                  :disabled="
                    item.Operator === 'empty' || item.Operator === 'noEmpty'
                  "
                  @change="handelSearch"
                >
                  <el-option
                    v-for="(op, index2) in item.filterOptions"
                    :key="index2"
                    :label="op.label"
                    :value="op.value"
                  />
                </el-select>
              </template>
              <template v-else>
                <el-input
                  v-model="item.CompareValue"
                  placeholder="请输入值"
                  clearable
                  :disabled="
                    item.Operator === 'empty' || item.Operator === 'noEmpty'
                  "
                  @keyup.enter.native="handelSearch"
                />
              </template>
            </el-col>
          </el-row>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableKey: {
      type: String,
      default: () => null,
    }, // 查询条件缓存
    tableColumnsCacheKey: {
      type: String,
      default: () => null,
    }, // 列缓存

    // 查询字段类型
    columns: {
      type: Array,
      default: () => [],
    },
    tools: {
      type: Array,
      default: () => [],
    },
    toolsSearch: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 逻辑操作符号
      andor: [
        {
          value: 1,
          label: "或者",
        },
        {
          value: 0,
          label: "并且",
        },
      ],
      // 比较操作符号
      operator: [
        {
          value: "Contains",
          label: "包含",
        },
        {
          value: "eq",
          label: "等于",
        },
        {
          value: "gt",
          label: "大于",
        },
        {
          value: "lt",
          label: "小于",
        },
        {
          value: "ne",
          label: "不等于",
        },

        {
          value: "gte",
          label: "大于等于",
        },
        {
          value: "lte",
          label: "小于等于",
        },
        {
          value: "in",
          label: "多选",
        },
      ],
      saveLocalStorageFilterList: [], // 用户保存到本地的查询列表
      filter: [], // 用户手动查询的条件列表
      isExpansion: true,
      isDynamic: true,
      boolOp: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    tableKey: {
      immediate: true,
      handler(val) {
        if (val) {
          // 添加查询条件保存，根据用户名_页面名缓存，页面加载根据缓存展示查询条件；
          const userInfo = JSON.parse(sessionStorage.getItem("userName"));
          const saveLocalStorageKey = `${userInfo.userName}_${this.tableKey}`;
          const saveLocalStorageFilterList = JSON.parse(
            localStorage.getItem(saveLocalStorageKey)
          );
          if (saveLocalStorageFilterList) {
            const initFilters = saveLocalStorageFilterList.initFilters
              ? saveLocalStorageFilterList.initFilters
              : [];
            this.filter = initFilters;
          }
        }
      },
    },
  },
  methods: {
    handleFilter() {},
    handleClear() {
      this.filter = [];
      this.$emit("handleClear");
    },
    handelSearch() {
      this.$emit("handelSearch");
    },
    saveSetting() {
      this.$emit("saveSetting");
    },
    setFilter(filterList) {
      console.log("🚀 ~ setFilter ~ filterList:", filterList);
      this.filter = [...filterList];

      this.handelSearch();
    },
    /**
     * @description: 添加单个条件
     */
    addLastItems() {
      this.isExpansion = true;
      this.filter.push({
        FieldName: "",
        Operator: "Contains",
        AndOr: "并且",
        type: "",
        CompareValue: "",
        filterOptions: "",
        IsList: 0,
        Label: "",
        addType: null,
      });
    },
    /**
     * @description: 添加条件组
     */
    addItemGroup() {
      this.isExpansion = true;
      const groupFilter = [
        {
          FieldName: "",
          Operator: "Contains",
          AndOr: 0,
          type: "",
          CompareValue: "",
          filterOptions: "",
          IsList: 0,
          Label: "",
        },
        {
          FieldName: "",
          Operator: "Contains",
          AndOr: 0,
          type: "",
          CompareValue: "",
          filterOptions: "",
          IsList: 0,
          Label: "",
        },
      ];
      this.filter.push({ addType: "group", groupFilter, AndOr: "并且" });
    },
    /**
     * @description: 单个添加条件组
     * @param {*} index
     */
    addGroupFilterLastItems(index) {
      this.filter[index].groupFilter.push({
        FieldName: "",
        Operator: "Contains",
        AndOr: "并且",
        type: "",
        CompareValue: "",
        filterOptions: "",
        IsList: 0,
        Label: "",
      });
    },
    /**
     * @description: 单个删除条件组
     * @param {*} index
     */
    rmGroupFilterItems(index, groupIndex) {
      const currentLength = this.filter[index].groupFilter.length;
      if (groupIndex === 0 && currentLength === 1) {
        this.filter.splice(index, 1);
      } else {
        this.filter[index].groupFilter.splice(groupIndex, 1);
      }
    },
    /**
     * @description: 指定某个作为查询条件
     */
    appointAddItems(appointItems) {
      this.filter.push(appointItems);
    },
    /**
     * @description: 删除当个查询条件
     * @param {*} index
     */
    rmLastItems(index) {
      let status = false;
      if (
        this.filter[index].FieldName !== undefined &&
        this.filter[index].FieldName !== ""
      ) {
        status = true;
      }
      this.filter.splice(index, 1);

      if (status) {
        this.handelSearch();
      }
      this.$message.success("移除成功");
    },
    /**
     * @description: 左侧关系切换
     * @param {*} e
     * @param {*} index
     */
    handleCommand(e, index) {
      this.filter[index].AndOr = e === 1 ? "或者" : "并且";
    },
    /**
     * @description: 删除一整个条件组
     * @param {*} index
     */
    removeGroupFilter(index) {
      this.filter.splice(index, 1);
      this.handelSearch();
    },
    /**
     * @description: 分组中的属性选择
     * @param {*} filterIndex
     * @param {*} val
     * @param {*} index
     * @param {*} item
     */
    groupSelectChange(filterIndex, val, index, item) {
      item.CompareValue = "";
      const cItem = this.columns
        .filter((item) => item.field === val)
        .map((item) => item)[0];
      const filterType = cItem.filterType;
      if (filterType === "select") {
        item.filterOptions = cItem.filterOptions;
        item.isItemValue = cItem.isItemValue;
        item.isMultiple = cItem.isMultiple;
        item.Operator = "eq";
        if (item.isMultiple) {
          item.IsList = 1;
        }
      } else if (filterType === "date") {
        // 时间类型 year/month/date/week/ datetime/datetimerange/daterange
        item.dateType = cItem.dateType;
        item.Operator = "eq";
      } else if (filterType === "inputNumber") {
        item.Operator = "eq";
      } else {
        item.Operator = "Contains";
      }
      item.type = filterType;
      item.Label = cItem.label;
      this.filter[filterIndex].groupFilter.index = item;
      // this.$set(this.filter[filterIndex].groupFilter, index, item);
    },
    /**
     * @description: 条件组中的操作变更
     * @param {*} filterIndex
     * @param {*} val
     * @param {*} index
     * @param {*} item
     */
    groupOperatorSelectChange(filterIndex, val, index, item) {
      if (item.Operator === "empty" || item.Operator === "noEmpty") {
        item.CompareValue = null;
        this.filter[filterIndex].groupFilter.index = item;
        // this.$set(this.filter[filterIndex].groupFilter, index, item);
        // this.$set(, index, item)
      }
    },
    /**
     * @description: 单个条件的操作变更
     * @param {*} val
     * @param {*} index
     * @param {*} item
     */
    operatorSelectChange(val, index, item) {
      if (item.Operator === "empty" || item.Operator === "noEmpty") {
        item.CompareValue = null;
        this.filter.index = item;
        // this.$set(this.filter, index, item);
      }
    },
    /**
     * @description: 单个条件中的属性选择
     * @param {*} val
     * @param {*} index
     * @param {*} item
     */
    selectChange(val, index, item) {
      // 删除上一次选择的值
      item.CompareValue = "";
      const cItem = this.columns
        .filter((item) => item.field === val)
        .map((item) => item)[0];
      const filterType = cItem.filterType;
      if (filterType === "select") {
        item.filterOptions = cItem.filterOptions;
        item.isItemValue = cItem.isItemValue;
        item.isMultiple = cItem.isMultiple;
        item.Operator = "eq";
        if (item.isMultiple) {
          item.IsList = 1;
        }
      } else if (filterType === "date") {
        // 时间类型 year/month/date/week/ datetime/datetimerange/daterange
        item.dateType = cItem.dateType;
        item.Operator = "eq";
      } else if (filterType === "inputNumber") {
        item.Operator = "eq";
      } else {
        item.Operator = "Contains";
      }
      item.type = filterType;
      item.Label = cItem.label;
      this.filter.index = item;
      // this.$set(this.filter, index, item);
    },
    expansion() {
      this.isExpansion = !this.isExpansion;
    },
    dynamic() {
      this.$emit("dynamic");
    },
    /**
     * @description: 操作判断
     * @param {*} op
     * @param {*} type
     */
    operatorFunc(op, type) {
      if (type === "date") {
        // 区间： 两个框，
        return [
          // {
          //   value: 'interval',
          //   label: '区间'
          // },
          {
            value: "eq",
            label: "等于",
          },
          {
            value: "gt",
            label: "大于",
          },
          {
            value: "lt",
            label: "小于",
          },
          {
            value: "gte",
            label: "大于等于",
          },
          {
            value: "lte",
            label: "小于等于",
          },
          // {
          //   value: 'empty',
          //   label: '为空'
          // },
          // {
          //   value: 'noEmpty',
          //   label: '不为空'
          // }
        ];
      } else if (type === "bool") {
        return [
          {
            value: "eq",
            label: "等于",
          },
          {
            value: "ne",
            label: "不等于",
          },
          {
            value: "empty",
            label: "为空",
          },
          {
            value: "noEmpty",
            label: "不为空",
          },
        ];
      } else if (type === "select") {
        return [
          {
            value: "eq",
            label: "等于",
          },
          {
            value: "ne",
            label: "不等于",
          },
          {
            value: "empty",
            label: "为空",
          },
          {
            value: "noEmpty",
            label: "不为空",
          },
        ];
      } else if (type === "inputNumber") {
        return [
          {
            value: "eq",
            label: "等于",
          },
          {
            value: "ne",
            label: "不等于",
          },
          {
            value: "gt",
            label: "大于",
          },
          {
            value: "lt",
            label: "小于",
          },
        ];
      } else {
        return [
          {
            value: "Contains",
            label: "包含",
          },
          {
            value: "eq",
            label: "等于",
          },
          {
            value: "ne",
            label: "不等于",
          },
          {
            value: "empty",
            label: "为空",
          },
          {
            value: "noEmpty",
            label: "不为空",
          },
        ];
      }
    },
    clearCacheColumns() {
      this.$emit("clearCacheColumns");
    },
  },
};
</script>

<style scoped lang="scss">
.filterBox {
  margin-top: 10px;
  padding: 15px;
  width: 100%;
  background: #f9f9fa;
  display: flex;
  flex-direction: column;
  height: 82%;
  overflow: scroll;
}
.filterItem {
  display: flex;
  width: 86%;
  position: relative;
  margin-bottom: 10px;
  align-items: center;
}
.left {
  width: 120px;
  display: flex;
  justify-content: center;
  position: relative;
  .line {
    width: 0.5px;
    border: 1px dashed #c0c4cc;
    margin: 15px 0px;
  }
  .line::before {
    content: " ";
    position: absolute;
    top: 15px;
    right: 0;
    height: 100%;
    width: 55px;
    margin-right: 5px;
    border-top: 1px dashed #c0c4cc;
    // background: red;
  }
  .line::after {
    content: " ";
    position: absolute;
    bottom: 15px;
    right: 0;
    height: 100%;
    width: 55px;
    margin-right: 5px;
    border-bottom: 1px dashed #c0c4cc;
    // background: red;
  }

  .dropdownBox {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    // width: 66%;
    //   z-index: 999;
    //   background-color: #f3f4f6;
  }
}
.filter {
  // width: 84%;
  flex: 1;
  // margin-bottom: 10px;
  // padding:6px;
  display: flex;
  position: relative;
  // margin-top: 10px;
  // background: #f4f4f4;
}
.groupFilterBox {
  display: flex;
  // flex-direction: column;
  position: relative;
  // display;
}
.groupFilter {
  margin-bottom: 20px;
  padding: 6px;
  // background: #f4f4f4;
  border: 1px dashed #ccc;
  width: 86%;
  position: relative;
  // display: flex;
  // border-radius: 4px;
}

.groupFilterAndOr {
  align-self: end;
  width: 80px;
  text-align: center;
}
.filterAndOr {
  position: relative;
  top: 20px;
}
.removeGroupFilterIcon {
  position: absolute;
  top: 50%;
  right: -17px;
  transform: translate(-50%, -8px);
  cursor: pointer;
  color: #8c95a8;
}

.filter-container {
  // display: flex;
  // flex-direction: column;
  max-height: 50%;
  // overflow: scroll;
  // height: 300px;
  // height: 220px;
  // min-height: ;
}
</style>
